<template>
  <div>
    <h2>Content{{ count }}</h2>
    <Item v-bind="$attrs" v-on="$listeners"></Item>
  </div>
</template>


<script>
import Item from "./Item";
export default {
  name: "Content",
  components: {
    Item,
  },
  props: ["count"],
  mounted() {
    /* 
    在组件实例上有一个$attr的属性 用来接收父组件传递进来的props(除了已经被接收的和动态style动态class)
    然后我们可以使用v-bind批量传递给后代组件
    */
    console.log(this.$attrs);
    /* 
    在组件实例上有一个$listeners的属性 用来接收父组件传递进来的所有的自定义事件
    然后我们可以使用v-on批量绑定给子组件 深层次传递
    */
    console.log(this.$listeners);
  },
};
</script>

<style>
</style>